<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.proCode"
        size="small"
        placeholder="商品编码"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.goodsBrand"
        size="small"
        placeholder="商品品牌"
        style="width: 200px;margin-left:2%"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.infoName"
        size="small"
        placeholder="商品名称"
        style="width: 200px;margin-left:2%"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <p style="display:inline-block;margin-left:2%">商品类型：</p>
      <el-select
        v-model="depValue"
        size="small"
        placeholder="全部"
        clearable
        class="filter-item"
        style="width: 130px"
      >
        <el-option v-for="item in deps" :key="item.id" :label="item.name" :value="item.catId" />
      </el-select>
      <p style="display:inline-block;margin-left:2%">商品状态：</p>
      <el-select
        v-model="listQuery.status"
        size="small"
        placeholder="全部"
        clearable
        class="filter-item"
        style="width: 130px"
      >
        <el-option
          v-for="item in statusOptions"
          :key="item.key"
          :label="item.display_name"
          :value="item.key"
        />
      </el-select>
      <el-button
        size="small"
        class="filter-item"
        type="success"
        icon="el-icon-search"
        @click="handleFilter"
      >搜索</el-button>
      <el-button
        size="small"
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >添加</el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      size="small"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @sort-change="sortChange"
    >
      <el-table-column
        :class-name="getSortClass('id')"
        label="ID"
        prop="id"
        sortable="custom"
        align="center"
        width="50"
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品编码" width="140px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.proCode }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品" min-width="200px" align="center">
        <template slot-scope="scope" style="display:flex; justify-content:space-around">
          <div style="display:flex; justify-content:space-around;width:100%;height:100%">
            <div style="width:50%;height:100%">
              <img
                :src="scope.row.imageUrl"
                style="width:70%;height:70%"
                @click="showBig(scope.row)"
              />
            </div>
            <el-dialog :visible.sync="dialogible" append-to-body>
              <img :src="dialogImage" width="100%" alt />
            </el-dialog>
            <div
              style="width:50%;height:100%;display:flex;flex-direction:column;align-items:center"
            >
              <p style="display:block;width:100%; height: 50%">{{ scope.row.infoName }}</p>
              <p style="display:block;width:100%; height: 50%">{{ scope.row.proType }}</p>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品品牌" width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.goodsBrand }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商品类型" width="80px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.catName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="采购价" width="200" align="center">
        <template slot-scope="scope">
          <span
            v-for="(item,index) in scope.row.proPriceVosList"
            :key="index"
            style="display:inline-block;width:100%"
          >{{ item.proTitle }}&nbsp;&nbsp;&nbsp;：&nbsp;&nbsp;&nbsp;￥{{ item.proPurchansePrice }}</span>
          <!-- <span>{{this.moneyList}}</span> -->
        </template>
      </el-table-column>
      <el-table-column label="市场价" width="200" align="center">
        <template slot-scope="scope">
          <span style="display:inline-block;width:100%">￥{{ scope.row.proMarketPrices }}</span>
        </template>
      </el-table-column>
      <el-table-column label="销售价" width="200" align="center">
        <template slot-scope="scope">
          <span
            v-for="(item,index) in scope.row.proPriceVosList"
            :key="index"
            style="display:inline-block;width:100%"
          >{{ item.proTitle }}&nbsp;&nbsp;&nbsp;：&nbsp;&nbsp;&nbsp;￥{{ item.proSellPrice }}</span>
        </template>
      </el-table-column>

      <el-table-column label="是否支持小康币兑换" width="100" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.susXkb==1?'支持':scope.row.susXkb==0?'不支持':'' }}</span>
        </template>
      </el-table-column>

      <el-table-column label="商品状态" width="50px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.status==0?'删除':scope.row.status==1?'正常':'下架' }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="260px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button size="small" align="center" type="primary" @click="handleUpdate(row)">编辑</el-button>
          <el-button size="small" align="center" type="success" @click="handleLabel(row)">打标签</el-button>
          <!-- <el-button
            v-if="row.status != 'published'"
            size="mini"
            type="success"
            @click="handleModifyStatus(row, 'published')"
          >
            Publish
          </el-button>-->
          <el-button
            type="danger"
            plain
            size="small"
            @click="row.status==1?updateStatus(row):changeStatus(row)"
          >{{ row.status==1?"下架":"上架" }}</el-button>
          <!-- <el-button
            v-if="row.status != 'deleted'"
            size="mini"
            type="danger"
            @click="handleModifyStatus(row, 'deleted')"
          >
            Delete
          </el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />

    <el-dialog
      :close-on-click-modal="false"
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      append-to-body
      width="60%"
      @close="loadPage"
    >
      <a-steps :current="current">
        <a-step v-for="item in steps" :key="item.title" :title="item.title" />
      </a-steps>
      <div class="steps-content">
        <el-form
          v-if="current==0"
          ref="dataForm"
          :rules="rules"
          :model="temp"
          label-position="right"
          label-width="250px"
          class="demo-ruleForm"
          style="width: 500px; margin:0 auto;margin-top:5%"
        >
          <el-form-item label="商品名称：" prop="infoName">
            <el-input v-model="temp.infoName" />
          </el-form-item>
          <el-form-item style="margin-left:10px" label="商品分类：" prop="depsRule">
            <el-select
              v-model="temp.depsRule"
              size="small"
              placeholder="全部"
              clearable
              class="filter-item"
              style="width: 130px;margin-left:-10px"
            >
              <el-option
                v-for="item in deps"
                :key="item.id"
                :label="item.name"
                :value="item.catId"
              />
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left:10px" label="商品厂家：" prop="supplierId">
            <el-select
              v-model="temp.supplierId"
              size="small"
              placeholder="全部"
              clearable
              class="filter-item"
              style="width: 130px;margin-left:-10px"
            >
              <el-option
                v-for="item in mList"
                :key="item.id"
                :label="item.realName"
                :value="item.supplierId"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="商品品牌：" prop="goodsBrand">
            <el-input v-model="temp.goodsBrand" />
          </el-form-item>
          <el-form-item label="商品型号：" prop="proType">
            <el-input v-model="temp.proType" />
          </el-form-item>
          <el-form-item label="是否支持小康币兑换：">
            <!-- <el-radio v-model="radio" style="margin-left:25px" label="1">支持</el-radio>
            <el-radio v-model="radio" label="0"></el-radio>-->

            <el-radio-group v-model="temp.susXkb">
              <el-radio label="1">支持</el-radio>
              <el-radio label="0">不支持</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="商品7天包退换：">
            <el-radio v-model="radio" style label="1">否</el-radio>
            <el-radio v-model="radio" label="0">是</el-radio>
          </el-form-item>
        </el-form>
        <div v-if="current==1">
          <el-form
            v-if="current==1"
            :rules="rules"
            :model="temp"
            label-position="right"
            label-width="100px"
            style="width: 400px; margin:0 auto;margin-top:5%"
          >
            <el-form-item label="商品信息：">
              <el-select
                v-model="info"
                size="small"
                placeholder="全部"
                clearable
                class="filter-item"
                style="width: 250px;"
              >
                <el-option
                  v-for="item in calendarTypeOptions"
                  :key="item.key"
                  :label="item.display_name"
                  :value="item.key"
                />
              </el-select>
              <p style="font-size:12px;color:#CACDD4;">请选择商品信息（标签或者信息栏）</p>
            </el-form-item>
          </el-form>
          <el-form
            v-if="info==1"
            ref="dynamicValidateForm"
            :model="dynamicValidateForm"
            style="width: 600px; margin-left:50%;transform:translate(-195px)"
            class="demo-dynamic"
          >
            <el-form-item style="margin-left:-22%" label="信息栏名称（配置商品信息）：">
              <el-input v-model="informationName" style="width:60%;" />
            </el-form-item>
            <el-form-item
              v-for="(domain, index) in dynamicValidateForm.domains"
              :label="'信息栏' + index+'：'"
              :key="domain.key"
            >
              <el-input v-model="domain.value" style="width:30%" placeholder="信息栏标题" />
              <el-input
                v-model="domain.value1"
                placeholder="标题内容"
                style="width:30%;margin-left:3%"
              />
              <el-button
                style="margin-left:2%"
                type="warning"
                @click.prevent="removeDomain(domain)"
              >
                <i class="el-icon-remove-outline" />
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button style="margin-left:2%" @click="addDomain">
                <i class="el-icon-circle-plus-outline" />
              </el-button>
            </el-form-item>
          </el-form>
          <el-form
            v-if="info==0"
            ref="dynamicValidateForm1"
            :model="dynamicValidateForm1"
            style="width: 700px; margin-left:50%;transform:translate(-300px)"
            class="demo-dynamic"
          >
            <el-form-item
              v-for="(domain, index) in dynamicValidateForm1.domains"
              :label="'标签名称(配置商品标题)' + index+':'"
              :key="domain.key"
            >
              <el-input v-model="domain.value" style="width:25%" placeholder="输入标签名称" />
              <el-input
                v-model="domain.value1"
                placeholder="名称内容"
                style="width:25%;margin-left:2%"
              />
              <el-button
                style="margin-left:2%"
                type="warning"
                @click.prevent="removeDomain1(domain)"
              >
                <i class="el-icon-remove-outline" />
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button style="margin-left:2%" @click="addDomain1">
                <i class="el-icon-circle-plus-outline" />
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="current==2">
          <el-form
            :rules="rules"
            :model="temp"
            label-position="right"
            label-width="90px"
            style="width: 400px; margin:0 auto;margin-top:5%"
          >
            <el-form-item label="商品信息：">
              <el-select
                v-model="info1"
                size="small"
                placeholder="全部"
                clearable
                class="filter-item"
                style="width: 250px"
              >
                <el-option
                  v-for="item in commodityOptions"
                  :key="item.key"
                  :label="item.display_name"
                  :value="item.key"
                />
              </el-select>
              <p style="font-size:12px;color:#CACDD4;">请选择商品信息（标签或者单选控件）</p>
            </el-form-item>
          </el-form>
          <el-form
            v-if="info1==0"
            ref="dynamicValidateForm3"
            :model="dynamicValidateForm3"
            style="width: 600px; margin-left:50%;transform:translate(-330px)"
            class="demo-dynamic"
          >
            <el-form-item
              style="display:flex;justify-content:center;margin-left:-20%"
              label="标签名称（配置商品标题）："
            >
              <el-input v-model="infomation" style="width:250px" />
            </el-form-item>
            <el-form-item
              v-for="(domain, index) in dynamicValidateForm3.domains"
              :label="'标签内容项' + index+':'"
              :key="domain.key"
              style="display:flex;justify-content:center;"
            >
              <el-input v-model="domain.value" style="width:65%" placeholder="输入标签名称" />
              <el-button
                style="margin-left:2%"
                type="warning"
                @click.prevent="removeDomain3(domain)"
              >
                <i class="el-icon-remove-outline" />
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button style="margin-left:35%" @click="addDomain3">
                <i class="el-icon-circle-plus-outline" />
              </el-button>
            </el-form-item>
          </el-form>
          <el-form
            v-if="info1==1"
            ref="dynamicValidateForm2"
            :model="dynamicValidateForm2"
            class="demo-dynamic"
          >
            <el-form-item
              style="display:flex;justify-content:center;margin-left:-9%"
              label="单选名称(配置价格)："
            >
              <el-input v-model="singleName" style="width:300px" placeholder="输入单选控件名称" />
            </el-form-item>
            <el-form-item
              v-for="(domain) in dynamicValidateForm2.domains"
              :key="domain.key"
              style="margin-top:2%"
            >
              <el-input v-model="domain.value" style="width:18%;float:left;margin-top:3%">
                <template slot="prepend" style="padding:0 4px">单选项标题</template>
              </el-input>
              <el-input
                v-model="domain.purchase"
                style="width:18%;margin-left:2%;margin-top:3%;float:left"
                oninput="value=value.replace(/[^\d^\.]+/g, '')"
              >
                <template slot="prepend" style="padding:0 4px">采购价</template>
              </el-input>
              <el-input
                v-model="domain.market"
                style="width:18%;margin-left:2%;float:left;margin-top:3%"
                oninput="value=value.replace(/[^\d^\.]+/g, '')"
              >
                <template slot="prepend" style="padding:0 4px">市场价</template>
              </el-input>
              <el-input
                v-model="domain.sale"
                style="width:18%;margin-left:2%;float:left;margin-top:3%"
                oninput="value=value.replace(/[^\d^\.]+/g, '')"
              >
                <template slot="prepend" style="padding:0 4px">销售价</template>
              </el-input>
              <div style="float:left;margin-left:2%" class="clearfix" @click="changeImg(domain.id)">
                <el-upload
                  :show-file-list="false"
                  :http-request="customRequest"
                  v-model="domain.img"
                  class="avatar-uploader"
                  action="#"
                >
                  <div v-if="domain.img">
                    <img :src="domain.img" class="avatar" />
                  </div>
                  <i v-else class="el-icon-plus avatar-uploader-icon" />
                </el-upload>
              </div>
              <el-button
                style="margin-left:2%;margin-top:3%"
                type="warning"
                @click.prevent="removeDomain2(domain)"
              >
                <i class="el-icon-remove-outline" />
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button @click="addDomain2">
                <i class="el-icon-circle-plus-outline" />
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="current==3">
          <el-form
            ref="dataForm"
            :rules="rules"
            :model="temp"
            label-position="right"
            label-width="150px"
            style="width: 100%;"
          >
            <el-form-item style="width:50%;margin-left:10%;margin-top:5%" label="商品展示图:">
              <el-upload
                :on-preview="handlePictureCardPreview"
                :file-list="fileList"
                :limit="1"
                :on-remove="handleRemove"
                :http-request="customRequestImageUrl"
                action="demo"
                list-type="picture-card"
              >
                <i class="el-icon-plus" />
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" append-to-body>
                <img :src="dialogImageUrl" width="100%" alt />
              </el-dialog>
            </el-form-item>
            <el-form-item style="width:80%;margin-left:10%;margin-top:5%" label="商品轮播图:">
              <el-upload
                :on-preview="handlePictureCardPreview1"
                :on-remove="handleRemove1"
                :file-list="fileList1"
                :http-request="customRequestPic"
                action="demo"
                list-type="picture-card"
              >
                <i class="el-icon-plus" />
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" append-to-body>
                <img :src="dialogImageUrl" width="100%" alt />
              </el-dialog>
            </el-form-item>
            <el-form-item style="width:80%;margin-left:10%;margin-top:5%" label="商品详情图:">
              <el-upload
                :on-preview="handlePictureCardPreview2"
                :on-remove="handleRemove2"
                :file-list="fileList2"
                :http-request="customRequestDesc"
                action="demo"
                list-type="picture-card"
              >
                <i class="el-icon-plus" />
              </el-upload>
              <el-dialog :visible.sync="dialogVisible" append-to-body>
                <img :src="dialogImageUrl" width="100%" alt />
              </el-dialog>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="steps-action">
        <a-button v-if="current>0" style="margin-left: 8px" @click="prev">上一步</a-button>
        <a-button v-if="current < steps.length - 1" type="primary" @click="next">下一步</a-button>
        <a-button
          v-if="current == steps.length - 1"
          type="primary"
          :disabled='disabled'
          @click="dialogStatus === 'create' ? createData() : updateData()"
        >提交</a-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      title="尾货标签"
      :visible.sync="labelVisible"
      append-to-body
      width="60%"
    >
      <el-form
        ref="dataForm"
        :model="labelTemp"
        label-position="right"
        label-width="150px"
        :rules="rules"
        style="width: 650px; margin-left:150px;"
      >
        <el-form-item label="商品标签：">
          <el-checkbox v-model="labelTemp.tags">尾货</el-checkbox>
        </el-form-item>
        <el-form-item label="商品尾货价格：" prop="agencyUserName">
          <el-table
            :data="dataList"
            size="small"
            border
            fit
            highlight-current-row
            style="width: 100%;margin-top:1%"
          >
            <el-table-column label="商品规格" min-width="200px" align="center">
              <template slot-scope="scope">
                <span>{{scope.row.proTitle}}</span>
              </template>
            </el-table-column>
            <el-table-column label="尾货价格" width="200px" align="center">
              <template slot-scope="scope">
                <el-input v-model="scope.row.proSellPrice" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="labelVisible = false">返回</el-button>
        <el-button type="primary" @click="labelData()">保存提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  queryProLableList,
  queryCondition,
  queryTitle,
  queryFactory,
  echoedformation,
  updateInformation,
  commodityList,
  getSearchList,
  update,
  change,
  getManufacturerList,
  addIngfoList,
  queryTag,
  standardsTags,
  standardsPrice
} from "@/api/commodity"; // 异步请求 delLly
import { getImg1 } from "@/api/commodities";
import { uploadFile, deleteFile } from "@/api/publicReq.js";
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // 分页插件

const calendarTypeOptions = [
  {
    key: 0,
    display_name: "标签名称",
    describe: "商品信息中的标签名称"
  },
  {
    key: 1,
    display_name: "信息栏",
    describe: "商品信息中的标签名称"
  }
];
const commodityOptions = [
  {
    key: 0,
    display_name: "标签"
  },
  {
    key: 1,
    display_name: "单选"
  }
];
const statusOptions = [
  {
    key: "1",
    display_name: "正常"
  },
  {
    key: "2",
    display_name: "下架"
  }
];
const calendarTypeKeyValue = calendarTypeOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});
const commodityKeyValue = commodityOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});

const statusKeyValue = statusOptions.reduce((acc, cur) => {
  acc[cur.key] = cur.display_name;
  return acc;
}, {});

export default {
  inject: ["reload"],
  components: {
    Pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    },
    typeFilter(type) {
      return commodityKeyValue[type];
    },
    statusFilter(type) {
      return statusKeyValue[type];
    }
  },
  data() {
    return {
      statusOptions,
      dataList: null,
      labelVisible: false,
      planting: "",
      details: "",
      dialogImage: "",
      proPriceId: [],
      proId: "",
      imageUrl: [],
      showImgList: [],
      disabled:false,
      ee: "",
      current: 0,
      info: "",
      info1: "",
      newTemp: {
        proPriceVosList: [{}],
        proLimitConditionList: [{}]
      },
      ConditionList: [],
      newTempList: [],
      updateTemp: {
        proPriceVosList: [{}]
      },
      updateTempList: [],
      fileList: [],
      fileList1: [],
      fileList2: [],
      proPriceImgId: "",
      steps: [
        {
          title: "基本信息"
        },
        {
          title: "商品信息"
        },
        {
          title: "购买条件"
        },
        {
          title: "配置商品图片"
        }
      ],
      steps1: [
        {
          title: "商品展示图"
        },
        {
          title: "商品轮播图"
        },
        {
          title: "商品详情图"
        }
      ],
      tableKey: 0,
      list: null,
      total: 0,
      updateLunbo: "",
      updateXiangqing: "",
      listLoading: true,
      calendarTypeOptions,
      commodityOptions,
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        proCode: "",
        goodsBrand: "",
        infoName: "",
        status: ""
      },
      moneyList: [],
      informationName: "",
      infomation: "",
      singleName: "",
      radio: "1",
      // statusOptions: ['published', 'draft', 'deleted'],
      showReviewer: false,
      temp: {
        id: undefined,
        proType: "",
        goodsBrand: "",
        infoName: "",
        supplierId: "",
        catId: "",
        nameOfInformationBar: "",
        radioName: "",
        depsRule: "",
        supplierId: "",
        susXkb: "1"
      },
      deps: [],
      depValue: "",
      dialogFormVisible: false,
      dialogStatus: "",
      textMap: {
        update: "编辑",
        create: "添加"
      },
      dialogPvVisible: false,
      outerVisible: false,
      pvData: [],
      rules: {
        infoName: [
          {
            required: true,
            message: "请输入商品名称",
            trigger: "blur"
          },
          {
            min: 1,
            max: 100,
            message: "长度最少为1个字符",
            trigger: "blur"
          }
        ],
        proType: [
          {
            required: true,
            message: "请输入商品型号",
            trigger: "blur"
          },
          {
            min: 1,
            max: 100,
            message: "长度最少为1个字符",
            trigger: "blur"
          }
        ],
        depsRule: [
          { required: true, message: "请选择商品分类", trigger: "change" }
        ],
        supplierId: [
          { required: true, message: "请选择商品厂家", trigger: "change" }
        ],
        goodsBrand: [
          {
            required: true,
            message: "请输入商品品牌",
            trigger: "blur"
          },
          {
            min: 1,
            max: 100,
            message: "长度最少为1个字符",
            trigger: "blur"
          }
        ]
        // mustPrice: [
        //   { required: true, message: '内容不能为空', trigger: 'change' },
        //   { pattern: /^[0-9]+(.[0-9]{2})?$/, message: '请输入正确的数值',trigger: 'change'}
        // ]
      },
      downloadLoading: false,
      liaUserName: "",
      liaUserList: {},
      liaUser: null,
      rowId: "",
      rowStatus: "",
      mList: [],
      dynamicValidateForm: {
        domains: [
          {
            value: "",
            value1: ""
          }
        ]
      },
      dynamicValidateForm1: {
        domains: [
          {
            value: "",
            value1: ""
          }
        ]
      },
      domainsList: [],
      domainsList1: [],
      domainsList2: [],
      showTitle: "",
      dynamicValidateForm2: {
        domains: [
          {
            value: "",
            purchase: "",
            market: "",
            sale: "",
            img: ""
          }
        ]
      },
      domainsList3: [],
      dynamicValidateForm3: {
        domains: [
          {
            value: ""
          }
        ]
      },
      informationTitle: [],
      informationContent: [],
      labelTitle: [],
      labelContent: [],
      conditionTitle: [],
      singleTitle: [],
      purchaseList: [],
      marketList: [],
      saleList: [],
      labelList: [],
      addsImg: "",
      exhibitionImg: "",
      xiangqing: "",
      aaImg: [],
      detailsImg: [],
      imgUrl: "",
      proPicUrl: "",
      bf1: "",
      dialogVisible: false,
      dialogImageUrl: "",
      dialogible: false,
      proPicId: "",
      datas: [],
      labelTemp: {}
    };
  },
  created() {
    console.log("tttttt", this.$route.query.infoName);
    if (this.$route.query.infoName) {
      this.listQuery.infoName = this.$route.query.infoName;
    }
    this.getList();
    this.getSearch();
  },
  methods: {
    handleLabel(row) {
      this.labelVisible = true;
      this.labelId = row.id;
      this.proId = row.proId;
      this.labelTemp = Object.assign({}, row);
      if (this.labelTemp.tags === "4") {
        this.labelTemp.tags = true;
      } else if (this.labelTemp.tags !== "4") {
        this.labelTemp.tags = false;
      }
      // this.labelStatus=this.labelTemp.tags
      console.log(this.labelTemp);
      standardsTags(this.proId).then(res => {
        console.log(res);
        this.dataList = res.data.proPriceList;
      });
    },
    // labelChange(e){
    //   if(e){
    //     this.labelTemp.tags='0'
    //     console.log(this.labelTemp.tags)
    //   }else if(!e){
    //     this.labelTemp.tags='4'
    //     console.log(this.labelTemp.tags)
    //   }
    // },
    labelData() {
      if (this.labelTemp.tags) {
        this.labelTemp.tags = "4";
      } else if (!this.labelTemp.tags) {
        this.labelTemp.tags = "0";
      }
      // $set(this.dataList,'tags')
      // this.dataList.tags=this.labelTemp.tags
      // this.dataList.id=this.labelId
      var params = {
        tags: this.labelTemp.tags,
        id: this.labelId,
        list: this.dataList
      };
      standardsPrice(params).then(res => {
        if (res.code === 200) {
          this.$notify({
            title: "成功",
            message: "操作成功",
            type: "success",
            duration: 2000
          });
          this.labelVisible = false;
          this.getList();
        } else {
          this.$notify({
            title: "失败",
            message: "打尾货标签失败",
            type: "danger",
            duration: 2000
          });
        }
      });
    },
    showBig(row) {
      // console.log(row)
      this.dialogible = true;
      this.dialogImage = row.imageUrl;
    },
    loadPage() {
      // this.reload();
    },
    // 上传商品首图 展示图
    customRequestImageUrl(data) {
      const formData = new FormData();
      formData.append("file", data.file);
      this.saveFileImageUrl(formData);
    },
    // 商品轮播图
    customRequestPic(data) {
      const formData = new FormData();
      formData.append("file", data.file);
      this.saveFilePic(formData);
    },
    // 详情图
    customRequestDesc(data) {
      const formData = new FormData();
      formData.append("file", data.file);
      this.saveFileDesc(formData);
    },
    // 上传商品首图 展示图
    saveFileImageUrl(formData) {
      uploadFile(formData).then(res => {
        if (res.code === "200") {
          this.fileList.push(
            Object.assign({
              url: res.data.filePath
            })
          );
          this.$notify({
            title: "上传成功",
            type: "success",
            duration: 2500
          });
          // eslint-disable-next-line no-empty
        } else {
          Notification.error({
            title: "上传失败"
          });
        }
      });
    },
    // 上传商品轮播图
    saveFilePic(formData) {
      uploadFile(formData).then(res => {
        if (res.code === "200") {
          this.fileList1.push(
            Object.assign({
              url: res.data.filePath
            })
          );
          this.$notify({
            title: "上传成功",
            type: "success",
            duration: 2500
          });
          // eslint-disable-next-line no-empty
        } else {
          Notification.error({
            title: "上传失败"
          });
        }
      });
    },
    // 上传商品 详情图
    saveFileDesc(formData) {
      uploadFile(formData).then(res => {
        if (res.code === "200") {
          this.fileList2.push(
            Object.assign({
              url: res.data.filePath
            })
          );
          this.$notify({
            title: "上传成功",
            type: "success",
            duration: 2500
          });
          // eslint-disable-next-line no-empty
        } else {
          Notification.error({
            title: "上传失败"
          });
        }
      });
    },
    // 首图删除
    handleRemove(file, fileList) {
      const remove = file.url;
      String.prototype.replaceAll = function(s1, s2) {
        return this.replace(new RegExp(s1, "gm"), s2);
      };
      var newRemove = remove.replaceAll("/", "*");
      deleteFile(newRemove).then(res => {
        if (res.code === "200") {
          this.fileList = fileList;
          this.$notify({
            title: "删除成功",
            type: "success",
            duration: 2500
          });
          // eslint-disable-next-line no-empty
        } else {
          Notification.error({
            title: "删除失败"
          });
        }
      });
    },
    // 轮播图删除
    handleRemove1(file, fileList) {
      const remove = file.url;
      String.prototype.replaceAll = function(s1, s2) {
        return this.replace(new RegExp(s1, "gm"), s2);
      };
      var newRemove = remove.replaceAll("/", "*");
      deleteFile(newRemove).then(res => {
        if (res.code === "200") {
          this.fileList1 = fileList;
          this.$notify({
            title: "删除成功",
            type: "success",
            duration: 2500
          });
          // eslint-disable-next-line no-empty
        } else {
          Notification.error({
            title: "删除失败"
          });
        }
      });
    },
    // 详情图删除
    handleRemove2(file, fileList) {
      const remove = file.url;
      String.prototype.replaceAll = function(s1, s2) {
        return this.replace(new RegExp(s1, "gm"), s2);
      };
      var newRemove = remove.replaceAll("/", "*");
      deleteFile(newRemove).then(res => {
        if (res.code === "200") {
          this.fileList2 = fileList;
          this.$notify({
            title: "删除成功",
            type: "success",
            duration: 2500
          });
          // eslint-disable-next-line no-empty
        } else {
          Notification.error({
            title: "删除失败"
          });
        }
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePictureCardPreview1(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlePictureCardPreview2(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    changeImg(id) {
      this.proPriceImgId = id;
    },
    customRequest(data) {
      console.log(data);
      const formData = new FormData();
      formData.append("file", data.file);
      this.saveFile(formData);
    },
    saveFile(formData) {
      uploadFile(formData).then(res => {
        this.imageUrl = res.data.filePath;
        let imgLists = this.dynamicValidateForm2.domains;

        for (var i = 0; i < imgLists.length; i++) {
          // this.dynamicValidateForm2.domains[i].push(Object.assign({img:this.showImgList[i]}))
          // console.log(this.imageUrl)
          if (imgLists[i].id == this.proPriceImgId) {
            imgLists[i].img = res.data.filePath;
          }
        }
        this.dynamicValidateForm2.domains = imgLists;
      });
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1);
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: "",
        value1: "",
        key: Date.now()
      });
    },
    removeDomain1(item) {
      var index = this.dynamicValidateForm1.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm1.domains.splice(index, 1);
      }
    },
    addDomain1() {
      this.dynamicValidateForm1.domains.push({
        value: "",
        value1: "",
        key: Date.now()
      });
    },
    removeDomain2(item) {
      var index = this.dynamicValidateForm2.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm2.domains.splice(index, 1);
      }
    },
    addDomain2() {
      this.dynamicValidateForm2.domains.push({
        value: "",
        purchase: "",
        market: "",
        sale: "",
        img: "",
        key: Date.now()
      });
    },
    removeDomain3(item) {
      var index = this.dynamicValidateForm3.domains.indexOf(item);
      if (index !== -1) {
        this.dynamicValidateForm3.domains.splice(index, 1);
      }
    },
    addDomain3() {
      this.dynamicValidateForm3.domains.push({
        value: "",
        key: Date.now()
      });
    },
    updateStatus(row) {
      console.log(row.id);
      console.log(row.status);
      this.rowId = row.id;
      var params = {
        id: this.rowId,
        status: "2",
        proId: row.proId
      };
      update(params).then(res => {
        console.log(res);
        this.getList();
      });
    },
    changeStatus(row) {
      this.rowId = row.id;
      var params = {
        id: this.rowId,
        status: "1"
      };
      change(params).then(res => {
        this.getList();
      });
    },
    next() {
      this.current++;
    },
    prev() {
      this.current--;
    },
    // 查询商品分类
    getSearch() {
      this.deps = [];
      getSearchList().then(res => {
        this.deps = res.data;
      });
    },
    getManufacturer() {
      getManufacturerList().then(res => {
        this.mList = res.data;
      });
    },
    getList() {
      this.listLoading = true;
      var params = {
        // pageConvert: true,
        pageNum: this.listQuery.pageNum,
        pageSize: this.listQuery.pageSize,
        goodsBrand: this.listQuery.goodsBrand,
        proCode: this.listQuery.proCode,
        infoName: this.listQuery.infoName,
        catId: this.depValue,
        status: this.listQuery.status
      };
      commodityList(params).then(response => {
        this.list = response.content;
        this.total = response.totalElements;
        this.listLoading = false;
      });
    },
    handleFilter() {
      this.listQuery.pageNum = 1;
      this.getList();
    },
    handleModifyStatus(row, status) {
      this.$message({
        message: "操作Success",
        type: "success"
      });
      row.status = status;
    },
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "id") {
        this.sortByID(order);
      }
    },
    resetTemp() {
      this.temp = {
        id: undefined,
        susXkb: "1"
      };
      // 先清空
      // 商品主图容器
      this.exhibitionImg = "";
      this.fileList = [];
      // 商品轮播图容器
      this.aaImg = [];
      this.fileList1 = [];
      // 商品详情图容器
      this.detailsImg = [];
      this.fileList2 = [];

      //
      this.informationName=''
      this.dynamicValidateForm = {
        domains: [
          {
            value: "",
            value1: ""
          }
        ]
      };
      this.dynamicValidateForm1 = {
        domains: [
          {
            value: "",
            value1: ""
          }
        ]
      };
      this.dynamicValidateForm2 = {
        domains: [
          {
            value: "",
            purchase: "",
            market: "",
            sale: "",
            img: ""
          }
        ]
      };
      this.dynamicValidateForm3 = {
        domains: [
          {
            value: ""
          }
        ]
      };
      this.infomation=''
      this.singleName = "";
    },
    // 添加操作
    handleCreate() {
      this.resetTemp();
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.disabled=false
      this.current = 0;
      this.getManufacturer();
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },

    //  提交
    createData() {
      // this.$refs['dataForm'].validate((valid) => {
      //   if (valid) {
      this.disabled=true
      this.informationTitle = [];
      this.dynamicValidateForm.domains.forEach(item => {
        this.informationTitle.push(item.value);
      });
      this.informationContent = [];
      this.dynamicValidateForm.domains.forEach(item => {
        this.informationContent.push(item.value1);
      });
      // this.temp.informationBarContents=this.informationContent
      this.labelTitle = [];
      this.dynamicValidateForm1.domains.forEach(item => {
        this.labelTitle.push(item.value);
      });
      // this.temp.paramName=this.labelTitle
      this.labelContent = [];
      this.dynamicValidateForm1.domains.forEach(item => {
        this.labelContent.push(item.value1);
      });
      this.singleTitle = [];
      this.dynamicValidateForm2.domains.forEach(item => {
        this.singleTitle.push(item.value);
      });
      // this.temp.proTitle=this.singleTitle
      this.purchaseList = [];
      this.dynamicValidateForm2.domains.forEach(item => {
        this.purchaseList.push(item.purchase);
      });
      // this.temp.proPurchansePrice=this.purchaseList
      this.marketList = [];
      this.dynamicValidateForm2.domains.forEach(item => {
        this.marketList.push(item.market);
      });
      // this.temp.proMarketPrice=this.marketList
      this.saleList = [];
      this.dynamicValidateForm2.domains.forEach(item => {
        this.saleList.push(item.sale);
      });
      this.imageUrl = [];
      this.dynamicValidateForm2.domains.forEach(item => {
        this.imageUrl.push(item.img);
      });
      this.labelList = [];
      this.dynamicValidateForm3.domains.forEach(item => {
        this.labelList.push(item.value);
      });
      this.newTempList = [];
      this.ConditionList = [];
      for (let i = 0; i < this.saleList.length; i++) {
        // this.$set(this.newTemp.proPriceVosList[i],'proSellPrice',this.saleList[i])
        // this.$set(this.newTemp.proPriceVosList[i],'proMarketPrice',this.marketList[i])
        // this.$set(this.newTemp.proPriceVosList[i],'proPurchansePrice',this.purchaseList[i])
        // this.$set(this.newTemp.proPriceVosList[i],'proTitle',this.singleTitle[i])
        // this.$set(this.newTemp.proPriceVosList[i],'photoUrl',this.imageUrl[i])
        this.newTempList.push(
          Object.assign({
            proSellPrice: this.saleList[i],
            proMarketPrice: this.marketList[i],
            proPurchansePrice: this.purchaseList[i],
            proTitle: this.singleTitle[i],
            photoUrl: this.imageUrl[i]
          })
        );
        this.ConditionList.push(
          Object.assign({
            proId: "",
            proPriceId: "",
            limitId: ""
          })
        );
        // ((index)=>{
        //   var aa=this.saleList[i]
        //   var bb=this.marketList[i]
        //   var cc=this.purchaseList[i]
        //   var dd=this.singleTitle[i]
        //   var ee=this.imageUrl[i]
        //   this.addList(aa,bb,cc,dd,ee)
        // })(i)
      }
      this.newTemp.proPriceVosList = this.newTempList;
      this.newTemp.proLimitConditionList = this.ConditionList;
      // 图片处理
      this.picProcess();
      this.addList();
    },
    addList() {
      this.newTemp = {
        imageUrl: this.imgUrl,
        proPicUrl: this.proPicUrl,
        bf1: this.bf1,
        proType: this.temp.proType,
        infoName: this.temp.infoName,
        goodsBrand: this.temp.goodsBrand,
        catId: this.temp.depsRule,
        supplierId: this.temp.supplierId,
        isReturnExchange: this.radio,
        nameOfInformationBar: this.informationName,
        informationBarTitle: this.informationTitle,
        informationBarContents: this.informationContent,
        paramName: this.labelTitle,
        proPriceVosList: this.newTemp.proPriceVosList,
        proLimitConditionList: this.newTemp.proLimitConditionList,
        paramValue: this.labelContent,
        radioName: this.singleName,
        labelName: this.infomation,
        labelContent: this.labelList,
        susXkb: this.temp.susXkb
      };
      addIngfoList(this.newTemp).then(() => {
        this.dialogFormVisible = false;
        // console.log(this.dialogFormVisible)
        this.$notify({
          title: "成功",
          message: "添加成功",
          type: "success",
          duration: 2000
        });
        this.getList();
      });
    },
    queryFactorys() {
      queryFactory(this.temp.supplierId).then(res => {
        this.temp.mListRule = res.data[0].supplierId;
      });
    },
    // 编辑操作
    handleUpdate: function(row) {
      this.disabled=false
      // 先清空
      this.current = 0;
      // 商品主图容器
      this.exhibitionImg = "";
      this.fileList = [];
      // 商品轮播图容器
      this.aaImg = [];
      this.fileList1 = [];
      // 商品详情图容器
      this.detailsImg = [];
      this.fileList2 = [];

      this.proId = row.proId;
      this.temp.depsRule = row.catId;
      this.proPicId = row.pro_pic_id;
      this.getManufacturer();
      this.temp.susXkb = row.susXkb;
      // this.temp=Object.assign({},row)
      // 获取商品图片
      getImg1(this.proId).then(res => {
        // 商品主图
        if (res.imageUrl !== null && res.imageUrl !== "") {
          this.fileList.push(
            Object.assign({
              url: res.imageUrl
            })
          );
        }
        // 商品轮播图
        if (res.proPicUrl !== null && res.proPicUrl !== "") {
          const arrImg = res.proPicUrl.split(",");
          arrImg.forEach(item => {
            this.fileList1.push(
              Object.assign({
                url: item
              })
            );
          });
        }
        // 商品详情图
        if (res.bf1 !== null && res.bf1 !== "") {
          const details = res.bf1.split(",");
          details.forEach(item => {
            this.fileList2.push(
              Object.assign({
                url: item
              })
            );
          });
        }
      });
      echoedformation(row.proId).then(res => {
        var echoed = res;
        this.temp.infoName = echoed.infoName;
        this.temp.goodsBrand = echoed.goodsBrand;
        this.temp.catId = echoed.catId;
        this.radio = echoed.isReturnExchange;
        this.temp.proType = echoed.proType;
        this.temp.supplierId = echoed.supplierId;
        // this.queryFactorys()
      });
      //回显商品信息
      queryTitle(row.proId).then(res => {
        for (var i = 0; i < res.data.length; i++) {
          if (res.data[i].nameOfInformationBar === " ") {
            this.info = 0;
            this.domainsList = [];
            for (var i = 0; i < res.data.length; i++) {
              this.domainsList.push(
                Object.assign({
                  value: res.data[i].paramName,
                  value1: res.data[i].paramValue
                })
              );
            }
            this.dynamicValidateForm1.domains = this.domainsList;
          } else {
            this.info = 1;
            this.informationName = res.data[i].nameOfInformationBar;
            this.domainsList1 = [];
            for (var i = 0; i < res.data.length; i++) {
              this.domainsList1.push(
                Object.assign({
                  value: res.data[i].informationBarTitle,
                  value1: res.data[i].informationBarContents
                })
              );
            }
          }
          this.dynamicValidateForm.domains = this.domainsList1;
          console.log(this.dynamicValidateForm.domains);
        }
        // if (res.data.nameOfInformationBar === '') {
        //   this.info = 0
        //   var paramNameList = JSON.parse(res.data.paramName)
        //   var paramValueList = JSON.parse(res.data.paramValue)
        //   this.domainsList = []
        //   for (var i = 0; i < paramNameList.length; i++) {
        //     this.domainsList.push(
        //       Object.assign({
        //         value: paramNameList[i],
        //         value1: paramValueList[i]
        //       })
        //     )
        //   }
        //   this.dynamicValidateForm1.domains = this.domainsList
        // }
      });
      queryCondition(row.proId).then(res => {
        this.info1 = 1;
        this.singleName = res.data.radioName;
        var proPriceList = res.data.proPriceList;
        this.domainsList2 = [];
        this.proPriceId = [];
        for (var i = 0; i < proPriceList.length; i++) {
          this.domainsList2.push(
            Object.assign({
              market: proPriceList[i].proMarketPrice,
              value: proPriceList[i].proTitle,
              purchase: proPriceList[i].proPurchansePrice,
              sale: proPriceList[i].proSellPrice,
              img: proPriceList[i].photoUrl,
              id: proPriceList[i].proPriceId
            })
          );
          this.proPriceId.push(proPriceList[i].proPriceId);
        }
        // console.log(this.proPriceId)
        this.dynamicValidateForm2.domains = this.domainsList2;
      });
      queryProLableList(row.proId).then(res => {
        this.info1 = 0;
        this.infomation = res.data[0].labelName;
        var ProLableList = JSON.parse(res.data[0].labelContent);
        this.domainsList3 = [];
        for (var i = 0; i < ProLableList.length; i++) {
          this.domainsList3.push(
            Object.assign({
              value: ProLableList[i]
            })
          );
        }
        this.dynamicValidateForm3.domains = this.domainsList3;
        // console.log(this.domainsList3)
      });

      this.dialogStatus = "update";
      this.dialogFormVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    // 编辑提交
    updateData() {
      this.disabled=true
      this.informationTitle = [];
      this.dynamicValidateForm.domains.forEach(item => {
        this.informationTitle.push(item.value);
      });
      this.informationContent = [];
      this.dynamicValidateForm.domains.forEach(item => {
        this.informationContent.push(item.value1);
      });
      // this.temp.informationBarContents=this.informationContent
      this.labelTitle = [];
      this.dynamicValidateForm1.domains.forEach(item => {
        this.labelTitle.push(item.value);
      });
      // this.temp.paramName=this.labelTitle
      this.labelContent = [];
      this.dynamicValidateForm1.domains.forEach(item => {
        this.labelContent.push(item.value1);
      });
      this.singleTitle = [];
      this.dynamicValidateForm2.domains.forEach(item => {
        this.singleTitle.push(item.value);
      });
      // this.temp.proTitle=this.singleTitle
      this.purchaseList = [];
      this.dynamicValidateForm2.domains.forEach(item => {
        this.purchaseList.push(item.purchase);
      });
      // this.temp.proPurchansePrice=this.purchaseList
      this.marketList = [];
      this.dynamicValidateForm2.domains.forEach(item => {
        this.marketList.push(item.market);
      });
      // this.temp.proMarketPrice=this.marketList
      this.saleList = [];
      this.dynamicValidateForm2.domains.forEach(item => {
        this.saleList.push(item.sale);
      });
      this.imageUrl = [];
      this.dynamicValidateForm2.domains.forEach(item => {
        this.imageUrl.push(item.img);
      });
      this.updateTempList = [];
      for (let i = 0; i < this.saleList.length; i++) {
        this.updateTempList.push(
          Object.assign({
            proSellPrice: this.saleList[i],
            proMarketPrice: this.marketList[i],
            proPurchansePrice: this.purchaseList[i],
            proTitle: this.singleTitle[i],
            photoUrl: this.imageUrl[i],
            proPriceId: this.proPriceId[i]
          })
        );
      }
      this.updateTemp.proPriceVosList = this.updateTempList;
      // 图片处理
      this.picProcess();
      this.updateList();
    },
    updateList() {
      var updateTemp = {
        proId: this.proId,
        imageUrl: this.exhibitionImg,
        proPicUrl: this.proPicUrl,
        bf1: this.bf1,
        proType: this.temp.proType,
        infoName: this.temp.infoName,
        // proSellPrice:aa,
        proPriceVosList: this.updateTemp.proPriceVosList,
        goodsBrand: this.temp.goodsBrand,
        catId: this.temp.depsRule,
        supplierId: this.temp.supplierId,
        isReturnExchange: this.radio,
        nameOfInformationBar: this.informationName,
        informationBarTitle: this.informationTitle,
        informationBarContents: this.informationContent,
        paramName: this.labelTitle,
        paramValue: this.labelContent,
        radioName: this.singleName,
        labelName: this.infomation,
        labelContent: this.labelList,
        susXkb: this.temp.susXkb
      };
      updateInformation(updateTemp).then(res => {
        // this.list.unshift(this.newTemp)
        this.dialogFormVisible = false;
        // console.log(this.dialogFormVisible)
        this.$notify({
          title: "成功",
          message: "修改成功",
          type: "success",
          duration: 2000
        });
        this.getList();
      });
    },
    // 图片处理
    picProcess() {
      this.exhibitionImg = "";
      if (this.fileList.length > 0) {
        this.fileList.forEach(item => {
          this.exhibitionImg = item.url;
        });
      }
      this.imgUrl = this.exhibitionImg;
      this.proPicUrl = "";
      const proInfoPic = [];
      if (this.fileList1.length > 0) {
        this.fileList1.forEach(item => {
          proInfoPic.push(item.url);
        });
        this.proPicUrl = proInfoPic.join(",");
      }
      this.bf1 = "";
      const proInfoDesc = [];
      if (this.fileList2.length > 0) {
        this.fileList2.forEach(item => {
          proInfoDesc.push(item.url);
        });
        this.bf1 = proInfoDesc.join(",");
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    },
    getSortClass: function(key) {
      const sort = this.listQuery.sort;
      return sort === `+${key}`
        ? "ascending"
        : sort === `-${key}`
        ? "descending"
        : "";
    }
  }
};
</script>
<style>
.el-input-group__prepend {
  padding: 0 5px;
}
</style>
<style>
.avatar-uploader .el-upload {
  float: left;
  margin-left: 2%;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
